# Class

The `Class` component is a utility component that conditionally applies a CSS class to a `div` element based on a boolean condition. It is useful for toggling styles dynamically.

### Import

```jsx
import { Class } from 'react-haiku';
```

### Usage

import { ClassDemo } from '../../demo/ClassDemo.jsx';

<ClassDemo />

```jsx
import React, { useState } from 'react';
import { Class } from 'react-haiku';

const Component = () => {
  const [isActive, setIsActive] = useState(false);
  
  const toggleActive = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <button onClick={toggleActive}>
        {isActive ? 'Deactivate' : 'Activate'}
      </button>

      <Class
        className="box"
        condition={isActive}
        toggleClass="active"
        as="section"
      >
        This is a box that will toggle its class based on the button click.
      </Class>
    </div>
  );
};

export default Component;
```

### API

The component accepts the following props:

- `className` - The initial class name for the `div` element. Defaults to an empty string.
- `condition` - The condition to determine whether to apply the `toggleClass` or not. Defaults to `false`.
- `toggleClass` - The class name to be toggled based on the condition. Defaults to an empty string.
- `children` - The content to be rendered inside the `div` element.
- `as (ElementType)`: The type of HTML element to render. Defaults to div. You can specify other elements like section, article, etc.
- `[key: string]: any`: Any additional props to be passed to the element.
